<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/goods' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>添加品类</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form ref="form" :model="cates" label-width="80px">
		  	<el-form-item label="品类名称">
		    	<el-input v-model="cates.cate_name"></el-input>
		  	</el-form-item>

		  	<el-form-item label="可选属性">
			    <el-checkbox-group v-model="cates.attrList">
				    <el-checkbox v-for="item in cateList" :key="item.id" :label="item.cate_name" ></el-checkbox>
				</el-checkbox-group>
			</el-form-item>

		  	<el-form-item label="是否启用">
		    	<el-switch v-model="cates.status"></el-switch>
		  	</el-form-item>

		  	<el-form-item>
		    	<el-button type="primary" @click="addCate">编辑品类</el-button>
		    	<el-button>取消</el-button>
		  	</el-form-item>
		</el-form>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				token:"",
				cateList:[],
				cates:{
					cate_name:"",
					status:true,
					attrList:[]
				}
			}
		},
		created(){
			this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			this.getCateList();
		},
		methods:{
			handleRemove(file, fileList) {
		        console.log(file, fileList);
		    },
		    handlePreview(file) {
		        console.log(file);
		   	},
		    handlePictureCardPreview(file) {
		        this.dialogImageUrl = file.url;
		        this.dialogVisible = true;
		    },
		    handleExceed(files, fileList) {
	        	this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	      	},
		    beforeRemove(file, fileList) {
		        return this.$confirm(`确定移除 ${ file.name }？`);
		    },
		    addCate(){
		    	var list = this.handleCateID();
		    	axios.post('/api/screen/cate/edit',{_token:this.token,cate_name:this.cates.cate_name,status:this.cates.status,cate_list:list,id:this.$route.params.id})
		    		.then(result => {
		    			if(result.data.code == 200){
		    				this.$notify({
		    					type:"success",
		    					title:"编辑添加",
		    					message:result.data.message
		    				})
		    			}else{
		    				this.$notify.error(result.data.message);
		    			}
		    		})
		    		.catch(error => {

		    		})
		    },
		    handleCateID(){
		    	var temp = [];
		    	var str = "";
		    	for(var i=0;i<this.cates.attrList.length;i++){
		    		for(var v=0;v<this.cateList.length;v++){
		    			if(this.cates.attrList[i] == this.cateList[v].cate_name){
		    				if(str.indexOf(this.cateList[v].cate_name) == -1){
		    					console.log(this.cateList[v].cate_name,"======");
			    				temp.push({
			    					id:this.cateList[v].id,
			    					cate_name:this.cateList[v].cate_name
			    				});
		    				}
		    				str += this.cates.attrList[i]+"|";
		    			}
		    		}
		    	}
		    	return temp;
		    },
			getCateList()
		    {
		    	axios.get('/api/cates')
					.then(result => {
						if(result.data.code == 200){
							this.cateList = result.data.result;
							this.getScreenList();
						}
					})
					.catch(error => {

					})
		    },
		    getScreenList()
		    {
		    	axios.get('/api/screens?id='+this.$route.params.id)
					.then(result => {
						console.log(result);
						if(result.data.code == 200){
							var data = result.data.result[0];
							this.cates.cate_name = data.screen_cate_name;
							this.cates.status = data.screen_status;
							var tempData = JSON.parse(data.cate_id);
							for(var index in tempData){
								this.cates.attrList.push(tempData[index].cate_name);
							}
						}
					})
					.catch(error => {

					})
		    }
		}
	}
</script>

<style type="text/css">
	input[type=file] {
	    display: none;
	}
</style>